<template>
	<u-popup :show="showPrivacy" mode="center" round="15" customStyle="width: 80%;">
		<view class="privacy">
			<view class="title">隐私保护指引</view>
			<view class="des">
				<view>亲爱的用户，感谢您信任并使用本小程序！</view>
				我们非常重视用户的隐私和个人信息保护，您在使用我们的产品/服务时，我们可能会收集和使用您的相关信息，为此我们依据相关法律制定了
				<text :style="'color:'+color_value"
					@tap="handleOpenPrivacyContract">{{privacyContractName}}</text>，请您在点击同意之前仔细阅读并充分理解相关条款。
			</view>
			<view class="btns">
				<button open-type="agreePrivacyAuthorization" :class="color+'-bg'" class="check_ok"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
				<view class="check_no" @click="handleDisagree">不同意</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		name: 'privacy',
		data() {
			return {
				privacyContractName: '',
				showPrivacy: false,
				resolvePrivacyAuthorization: null,
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.getPrivacySetting()
			if (wx.onNeedPrivacyAuthorization) {
				wx.onNeedPrivacyAuthorization(resolve => {
					console.log('触发 onNeedPrivacyAuthorization', resolve)
					this.showPrivacy = true
					this.resolvePrivacyAuthorization = resolve
				})
			}
			// #endif
		},

		methods: {
			getPrivacySetting(type) {
				return new Promise((resolve, reject) => {
					// #ifdef APP-PLUS
					resolve(true)
					// #endif

					// #ifdef MP-WEIXIN
					if (wx.getPrivacySetting) {
						wx.getPrivacySetting({
							success: res => {
								// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
								console.log(res)
								if (res.needAuthorization) {
									// 需要弹出隐私协议
									if (type == "showPrivacy") {
										this.showPrivacy = true
									}
									this.privacyContractName = res.privacyContractName
									resolve(false)
								} else {
									// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
									resolve(true)
								}
							}
						})
					} else {
						resolve(true)
					}

					// #endif
				})
			},

			async handleAgreePrivacyAuthorization() {
				// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
				this.showPrivacy = false
				if (typeof this.resolvePrivacyAuthorization === 'function') {
					this.resolvePrivacyAuthorization({
						buttonId: 'agree-btn',
						event: 'agree'
					})
				}
			},

			handleDisagree() {
				this.showPrivacy = false
				// 直接退出小程序
				wx.exitMiniProgram()
				if (typeof this.resolvePrivacyAuthorization === 'function') {
					this.resolvePrivacyAuthorization({
						event: 'disagree'
					})
				}
			},

			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},


		},
	};
</script>

<style>
	.privacy {
		width: 100%;
		padding: 7% 5%;
	}

	.title {
		text-align: center;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.des {
		font-size: 26rpx;
		color: #666;
		margin-top: 40rpx;
		text-align: justify;
		line-height: 1.6;
	}

	.check_ok{
		width: 90%;
		margin-top: 48rpx;
		font-size: 14px;
		border-radius: 20px;
	}
	
	.check_no{
		color: #999;
		text-align: center;
		margin-top: 24rpx;
		font-size: 14px;
	}
</style>
